<template>
    <div>
        <div class="ml-16px mr-16px">
            <el-row :gutter="16">
                <el-col :span="24" class="mb-16px">
                    <AQData />
                </el-col>
            </el-row>
        </div>
        <div class="ml-16px mr-16px mb-16px content-container">
            <Title :icon="'file-chart-fill'" :title="'每次排名'"></Title>
            <div class="pl-16px pr-16px">
                <el-table :data="state.tableData" class="w-full" :stripe="true" border>
                    <el-table-column prop="AddTime" align="center" label="日期">
                        <template #default="scope">
                            {{ formatDate(scope.row.AddTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="通义" align="center">
                        <el-table-column prop="AIType4" align="center" label="PC" />
                        <el-table-column prop="AIType14" align="center" label="移动端" />
                    </el-table-column>
                    <el-table-column label="KiMi" align="center">
                        <el-table-column prop="AIType6" align="center" label="PC" />
                        <el-table-column prop="AIType16" align="center" label="移动端" />
                    </el-table-column>
                    <el-table-column label="文心一言" align="center">
                        <el-table-column prop="AIType1" align="center" label="PC" />
                        <el-table-column prop="AIType11" align="center" label="移动端" />
                    </el-table-column>
                    <el-table-column label="DeepSeek" align="center">
                        <el-table-column prop="AIType5" align="center" label="PC" />
                        <el-table-column prop="AIType15" align="center" label="移动端" />
                    </el-table-column>
                    <el-table-column label="豆包" align="center">
                        <el-table-column prop="AIType2" align="center" label="PC" />
                        <el-table-column prop="AIType12" align="center" label="移动端" />
                    </el-table-column>
                    <el-table-column label="元宝" align="center">
                        <el-table-column prop="AIType3" align="center" label="PC" />
                        <el-table-column prop="AIType13" align="center" label="移动端" />
                    </el-table-column>
                    <el-table-column prop="Total" align="center" label="合计">
                    </el-table-column>
                </el-table>
            </div>
            <div class="pt-16px pl-26px pr-26px pb-16px page-container flex flex-center">
                <Pagination v-if="state.tableData.length > 0" v-model:total="state.page.total" v-model:page="state.page.curPage" v-model:limit="state.page.pageSizes" :autoScroll="false" @pagination="handlePage" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import AQData from '../report/components/AQData.vue'
import Title from '@/components/Title/index.vue'
import { getHistoryRankApi } from '@/api/geoBasic'
import { IHistoryRankTime } from '@/api/geo/types'
import { dateFormat } from '@/utils/date'

const state = reactive({
    tableData: <IHistoryRankTime[]>[],
    page: {
        total: 0,
        curPage: 1,
        limit: 20,
        pageSizes: 20,
    },
})

const formatDate = computed(() => {
    return function (data: string) {
        return dateFormat(data, 'YYYY-MM-DD')
    }
})

async function getHistoryRank() {
    const res: ResType = await getHistoryRankApi({
        pn: state.page.curPage
    })
    if (res.code === 200) {
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
    }
}

function handlePage(value: any) {
    state.page.curPage = value.page
    state.page.limit = value.limit
    getHistoryRank()
}

onMounted(() => {
    getHistoryRank()
})
</script>

<style scoped>

</style>